<template>
	<view class="evaluationServices ff-margin-12">
		<view class="evaluationServices-content ff-bg-fff ff-border-radius-10 ff-text-center">
			<view class="ff-font-16 ff-color-000 ff-font-weight-600">请为本次服务评分</view>
			<view class="ff-font-14 evaluationServices-content-tips">为了给您提供更好的服务，请为本次服务评分</view>
			<u-rate v-model="evaluateList.evaluateScore" active-color="#FF6633" size="60" inactive-color="#ECECEC"
				gutter="20"></u-rate>
			<view class="ff-font-15 evaluationServices-content-result ff-font-weight-600">
				<view class="ff-color-red" v-if="evaluateList.evaluateScore == 1">差</view>
				<view class="ff-color-blue"
					v-if="evaluateList.evaluateScore == 2 || evaluateList.evaluateScore == 3 || evaluateList.evaluateScore == 4">
					中</view>
				<view class="ff-color-yellow" v-if="evaluateList.evaluateScore == 5">好</view>
			</view>
			<view class="evaluationServices-content-text">
				<u-input v-model="evaluateList.evaluateContent" type="textarea" :clearable="false"
					placeholder="对本次服务感觉怎么样？请填写您的评价" height="200" border="true" maxlength="-1" />
			</view>
		</view>
		<view class="evaluationServices-but"><u-button @click="determineClick" type="primary"
				shape="circle">确定</u-button></view>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
	</view>
</template>

<script>
	export default {
		name: 'evaluationServices',
		data() {
			return {
				evaluateList: {
					maintenanceId: '',
					evaluateScore: '', // 打分
					evaluateContent: ''
				}
			};
		},
		onLoad(e) {
			this.evaluateList.maintenanceId = e.id;
		},
		methods: {
			// 提交评论
			determineClick() {
				if (this.evaluateList.evaluateScore == '' || this.evaluateList.evaluateScore == '0') {
					this.$refs.uToast.show({
						title: '请打分！',
						type: 'error'
					});
					return;
				}
				if (this.evaluateList.evaluateScore <= 3 && this.evaluateList.evaluateContent == '') {
					this.$refs.uToast.show({
						title: '3星及以下星级时，必须输入评价内容后才可提交',
						type: 'error'
					});
					return;
				}
				this.$refs.loading.openLoading('提交中···');
				this.$http
					.post({
						url: '/maintenance/evaluate2',
						data: this.evaluateList
					})
					.then(res => {
						// console.log('提交评论-----', res);
						if (res.code == 200 && res.success) {
							this.$refs.uToast.show({
								title: '评价成功！',
								type: 'success'
							});
							let that = this;
							setTimeout(() => {
								that.$pageJump.reLaunch(
									'/pages/maintenance/company/home/components/details/Report?id=' + that
									.evaluateList.maintenanceId);
							}, 500);
						} else {
							this.$refs.uToast.show({
								title: '评价失败！',
								type: 'error'
							});
						}
						this.$refs.loading.closeLoading();
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.evaluationServices {
		&-content {
			padding: 40rpx 30rpx;

			&-tips {
				color: #adadad;
				margin: 34rpx 0 38rpx;
			}

			&-result {
				color: #adadad;
				margin: 34rpx 0 0;
			}

			&-text {
				margin-top: 38rpx;
			}
		}

		&-but {
			/deep/.u-size-default.data-v-3bf2dba7 {
				height: 98rpx !important;
				line-height: 98rpx !important;
			}

			width: 90%;
			margin: 60rpx 5% 0;
		}
	}
</style>